import { defineComponent, ref } from 'vue'
import { usePrefix } from '../hooks'
import { TextWidget, IconWidget } from '../widgets'
import cls from 'classnames'

export const SettingsPanel = defineComponent({
  props: {
    title: {
      type: String,
      required: true,
    },
    extra: {
      type: String,
    },
  },
  setup(props, { slots }) {
    const prefix = usePrefix('settings-panel')
    const pinning = ref(false)
    const innerVisible = ref(true)
    return () => (
      <div class={cls(prefix)}>
        <div class={prefix + '-header'}>
          <div class={prefix + '-header-title'}>
            <TextWidget title={props.title}></TextWidget>
          </div>
          <div class={prefix + '-header-actions'}>
            <div class={prefix + '-header-extra'}>{props.extra}</div>
            {!pinning.value && (
              <IconWidget
                infer="PushPinOutlined"
                class={prefix + '-header-pin'}
              />
            )}
            {pinning.value && (
              <IconWidget
                infer="PushPinFilled"
                class={prefix + '-pin-filled'}
              />
            )}
            <IconWidget infer="Close" class={prefix + '-header-close'} />
          </div>
        </div>
        <div class={prefix + '-body'}>
          {innerVisible.value && slots.default?.()}
        </div>
      </div>
    )
  },
})
